<template>
	<view class="my-protocol" ref="uv-back-top">
		<uv-navbar v-if="!screen" title="协议" @leftClick="navigateBack" rightText="" :placeholder="true"></uv-navbar>
		<view class="protocol_content">
			<uv-gap height="20" bgColor="#fff"></uv-gap>
			<uv-text text="我用十年青春,赴你最后之约" size="20"></uv-text>
			<uv-gap height="20" bgColor="#fff"></uv-gap>
			<uv-gap height="1" bgColor="#bbb"></uv-gap>
			<uv-gap height="20" bgColor="#fff"></uv-gap>
			<uv-read-more ref="readMore">
				<uv-parse class="content" :content="content" @ready="ready"></uv-parse>
			</uv-read-more>
		</view>
		<uv-back-top :scroll-top="scrollTop"></uv-back-top>
		<!-- <tabbars :prop-value="'my'"></tabbars> -->
	</view>
</template>

<script>
	// 引入
	import tabbars from '@/components/tabbar/tabbar';
	import config from '@/common/config'
	export default {
		components: {
			// 注册组件
			tabbars
		},
		data() {
			return {
				scrollTop: 0,
				value: '',
				content: `<p class="content">
									<p>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</p>
									<p>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。</p>
									<p>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</p>
									<p>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？</p>
									<p>人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p>
									<p><img src="https://via.placeholder.com/200x200.png/2878ff" /></p>
									<p><img src="https://via.placeholder.com/200x200.png/2878ff" /></p>
									<p><img src="https://via.placeholder.com/200x200.png/2878ff" /></p>
									<p><img src="https://via.placeholder.com/200x200.png/2878ff" /></p>
									<p>译文：丙辰年的中秋节，高兴地喝酒直到第二天早晨，喝到大醉，写了这首词，同时思念弟弟苏辙。明月从什么时候才开始出现的？我端起酒杯遥问苍天。不知道在天上的宫殿，何年何月。我想要乘御清风回到天上，又恐怕在美玉砌成的楼宇，受不住高耸九天的寒冷。翩翩起舞玩赏着月下清影，哪像是在人间。月儿转过朱红色的楼阁，低低地挂在雕花的窗户上，照着没有睡意的自己。明月不该对人们有什么怨恨吧，为什么偏在人们离别时才圆呢？人有悲欢离合的变迁，月有阴晴圆缺的转换，这种事自古来难以周全。只希望这世上所有人的亲人能平安健康，即便相隔千里，也能共享这美好的月光。</p>
								</p>`
			}
		},
		computed: {},
		onLoad() {},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
		methods: {
			ready() {
				// 由于图片较多，可以再适当的给一个延迟
				setTimeout(() => {
					this.$refs.readMore.init();
				}, 1000)
			},
			routed(url) {
				uni.$uv.route({
					url: url,
					intercept(params, next) {
						console.log(params, next)
						uni.showLoading({
							title: '等待中...'
						})
						// 模拟处理等待
						setTimeout(() => {
							uni.hideLoading();
							next(true);
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-protocol {
		padding: 0px 10px;

		// width: calc(100% - 20px);
		// padding: 10px;
		.content {
			line-height: 48rpx;
			padding: 0 30rpx;
		}
	}

	// 测试
	.bg-purple {
		background: #CED7E1;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}
</style>